<template>
  <div class="cloud-service">
    <!-- search condition -->
    <Row>
      <Col :span="20">
        客户名称：
        <Input placeholder style="width: auto"/>&nbsp;&nbsp;
        客户手机：
        <Input placeholder style="width: auto"/>

        <Button type="primary">查询</Button>
      </Col>
      <Col span="4" class="text-right">
        <Button type="warning" @click="modal1= true">+ 增加客户</Button>
      </Col>
    </Row>

    <!-- tables -->
    <div class="mt20">
      <Table stripe :columns="columns1" :data="data1">
        <template slot-scope="{ row, index }" slot="action">
          <Icon type="ios-paper c1" size="20" @click="gotoDetail(row)"/>
          <Icon type="ios-create c5" size="20" @click="gotoDetail(row)"/>
          <Icon type="ios-trash c7" size="20" @click="deleteConfirm(index)"/>
        </template>
      </Table>
    </div>

    <div class="page mt20">
      <Page :total="100" show-sizer/>
    </div>

    <Modal v-model="modal1" title="新增/修改客户" footer-hide>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="客户名称" prop="name">
          <Input v-model="formValidate.name" placeholder=""></Input>
        </FormItem>
        <FormItem label="联系人" prop="mail">
          <Input v-model="formValidate.mail" placeholder=""></Input>
        </FormItem>
        <FormItem label="职务" prop="city">
          <Select v-model="formValidate.city" placeholder="选择职务">
            <Option value="beijing">总经理</Option>
            <Option value="shanghai">董事长</Option>
            <Option value="shenzhen">总监</Option>
          </Select>
        </FormItem>
        <FormItem label="联系手机" prop="mail">
          <Input v-model="formValidate.mail" placeholder=""></Input>
        </FormItem>
        <FormItem label="联系电话" prop="mail">
          <Input v-model="formValidate.mail" placeholder=""></Input>
        </FormItem>
        <FormItem label="邮箱地址" prop="mail">
          <Input v-model="formValidate.mail" placeholder=""></Input>
        </FormItem>
        <FormItem label="办公地址" prop="mail">
          <Input v-model="formValidate.mail" placeholder=""></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" style="width:180px;" @click="handleSubmit('formValidate')">确认</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.commit("UPDATE_POSITION", this.position);
  },
  data() {
    return {
      modal1: false,
      position: [
        {
          title: "代理商管理",
          link: "/admin/agent"
        },
        {
          title: "客户管理"
        }
      ],
      tradeType: "1",
      tradeTypes: [
        {
          label: "fsdf",
          value: "1"
        },
        {
          label: "fsdf2",
          value: "2"
        }
      ],
      columns1: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "客户名称",
          key: "address"
        },
        {
          title: "职务",
          key: "address"
        },
        {
          title: "联系人",
          key: "address"
        },
        {
          title: "联系手机",
          key: "address"
        },
        {
          title: "电话",
          key: "address"
        },
        {
          title: "邮箱",
          key: "address"
        },
        {
          title: "单位地址",
          key: "address"
        },
        {
          title: "操作",
          slot: "action",
          width: 180,
          align: "center"
        }
      ],
      data1: [
        {
          id: "103232",
          address: "fsdfsdfdsf"
        },
        {
          id: "103232",
          address: "fsdfsdfdsf"
        },
        {
          id: "103232",
          address: "fsdfsdfdsf"
        },
        {
          id: "103232",
          address: "fsdfsdfdsf"
        },
        {
          id: "103232",
          address: "fsdfsdfdsf"
        }
      ],
      formValidate: {
        name: "",
        mail: "",
        city: "",
        gender: "",
        interest: [],
        date: "",
        time: "",
        desc: ""
      },
      ruleValidate: {
        name: [
          {
            required: false,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
       
      }
    };
  },
  methods: {
    gotoDetail(item) {
      // this.$router.push(`buyDetail?id=${item.id}`)
    },
    deleteConfirm(index) {
      let that = this;
      this.$Modal.confirm({
        title: "警告",
        content: "真要删除吗?",
        onOk() {
          that.data1.splice(index, 1);
          that.$Message.success("删除成功");
        }
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
</style>
